import { Addon, Graph } from '@antv/x6';
import { Button, Col, Divider, Drawer, DrawerProps, Row, Space } from 'antd';
import React, { useRef } from 'react';
import { useToggle } from 'react-use';
import X6Util from '../../../utils/x6Util';
import EquipmentConfig from './component/equipmentConfigWarp';
import './index.less'

interface IEquipmentEditProps extends DrawerProps {

}
interface IEquipmentEditState {

}

class EquipmentEdit extends React.Component<IEquipmentEditProps, IEquipmentEditState> {
    graphInstance!: Graph;
    container = React.createRef<HTMLDivElement>();
    menuWrap = React.createRef<HTMLDivElement>();
    componentDidMount() {
        this.graphInstance = X6Util.getGraph(this.container.current!);
        this.menuWrap.current!.addEventListener("mousedown", this._mousedown);
    }
    componentWillUnmount() {
        this.menuWrap.current!.removeEventListener("mousedown", this._mousedown);
    }
    _mousedown = (e: MouseEvent) => {
        const _type = (e.target! as HTMLElement).getAttribute("data-type");
        if (!_type) {
            return;
        }
        const _ = this;
        const dnd = new Addon.Dnd({
            target: this.graphInstance,
        })

        dnd.start(_.graphInstance.createNode(X6Util.getNodeConfig("温度计")), e);
    }

    render() {
        const { ...drawerProps } = this.props;
        return (
            <Drawer
                footer={
                    <Space>
                        <Button type="primary" style={{ width: 90 }} >保存配置</Button>
                        <Button style={{ width: 90 }} >取消</Button>
                    </Space>
                }
                className="equipment-edit" placement="bottom" title="编辑设备" {...drawerProps} height={document.body.clientHeight * 0.8} >
                <Row gutter={24} className="equipment-edit-wrap">
                    <Col flex={"200px"} >
                        <Row ref={this.menuWrap} className="equipment-edit-node-wrap" >
                            <Col data-type="wenduji" className="equipment-edit-node" span={11}  >
                                温度计
                            </Col>
                            <Col data-type="wenduji" className="equipment-edit-node" span={11} offset={1}  >
                                温度计
                            </Col>
                        </Row>
                    </Col>
                    <Col flex={1} ref={this.container} />
                    <Col flex={"260px"} className="equipment-edit-config-wrap" >
                        <Divider orientation="left" >
                            设备配置
                        </Divider>
                        <EquipmentConfig />
                    </Col>
                </Row>
            </Drawer>
        );
    }
}

export default EquipmentEdit;

// interface IEquipmentEditProps extends DrawerProps {
//     // id: string,
// }

// const EquipmentEdit: React.FC<IEquipmentEditProps> = (props) => {
//     // const { visible, } = useToggle(false);
//     const { ...drawerProps } = props;
//     const useRef = React.useRef(null);
//     const x6 = X6Util.getGraph();
//     return (
//         <Drawer placement="bottom" title="编辑设备" {...drawerProps} height={document.body.clientHeight * 0.8} >
//             <div />
//         </Drawer>
//     )
// }

// export default EquipmentEdit;